<template>
	<view class="address-page">
		<!-- 顶部导航 -->
		<view class="nav-header">
			<view class="nav-back" @click="goBack">
				<u-icon name="arrow-left" size="20" color="#333"></u-icon>
			</view>
			<text class="nav-title">收货地址</text>
			<view class="nav-right" @click="addAddress">
				<u-icon name="plus" size="20" color="#27B387"></u-icon>
			</view>
		</view>
		
		<scroll-view class="address-content" scroll-y>
			<!-- 地址列表 -->
			<view class="address-list" v-if="addressList.length">
				<view 
					class="address-item" 
					v-for="(address, index) in addressList" 
					:key="address.id"
					@click="selectAddress(address)"
				>
					<view class="address-info">
						<view class="address-header">
							<view class="user-info">
								<text class="user-name">{{ address.name }}</text>
								<text class="user-phone">{{ address.phone }}</text>
							</view>
							<view class="default-tag" v-if="address.isDefault">
								<text class="tag-text">默认</text>
							</view>
						</view>
						<text class="address-detail">{{ getFullAddress(address) }}</text>
					</view>
					
					<view class="address-actions">
						<view class="action-btn" @click.stop="setDefault(address, index)">
							<u-icon 
								:name="address.isDefault ? 'checkmark-circle-fill' : 'radio-button-off'" 
								:color="address.isDefault ? '#27B387' : '#ddd'" 
								size="20"
							></u-icon>
							<text class="btn-text">默认</text>
						</view>
						<view class="action-btn" @click.stop="editAddress(address)">
							<u-icon name="edit-pen" size="16" color="#666"></u-icon>
							<text class="btn-text">编辑</text>
						</view>
						<view class="action-btn" @click.stop="deleteAddress(address, index)">
							<u-icon name="trash" size="16" color="#ff4757"></u-icon>
							<text class="btn-text delete">删除</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 空状态 -->
			<view class="empty-state" v-else>
				<image src="/static/empty-address.png" class="empty-image" mode="aspectFit"></image>
				<text class="empty-text">暂无收货地址</text>
				<button class="add-btn" @click="addAddress">
					<text class="btn-text">添加收货地址</text>
				</button>
			</view>
		</scroll-view>
		
		<!-- 底部添加按钮 -->
		<view class="bottom-add" v-if="addressList.length">
			<button class="add-address-btn" @click="addAddress">
				<u-icon name="plus" size="20" color="#fff"></u-icon>
				<text class="btn-text">新增收货地址</text>
			</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			selectionMode: false, // 是否为选择模式
			
			// 地址列表
			addressList: [
				{
					id: 1,
					name: '张三',
					phone: '138****8888',
					province: '北京市',
					city: '北京市',
					district: '朝阳区',
					detail: '三里屯街道工体北路8号院1号楼101室',
					isDefault: true
				},
				{
					id: 2,
					name: '李四',
					phone: '139****9999',
					province: '上海市',
					city: '上海市',
					district: '浦东新区',
					detail: '陆家嘴街道世纪大道100号2楼',
					isDefault: false
				},
				{
					id: 3,
					name: '王五',
					phone: '137****7777',
					province: '广东省',
					city: '深圳市',
					district: '南山区',
					detail: '科技园街道深南大道9999号科技大厦A座15楼',
					isDefault: false
				}
			]
		}
	},
	onLoad(options) {
		// 检查是否为选择模式
		if (options.mode === 'select') {
			this.selectionMode = true
		}
		this.loadAddressList()
	},
	methods: {
		// 返回上一页
		goBack() {
			uni.navigateBack()
		},
		
		// 加载地址列表
		loadAddressList() {
			// TODO: 调用地址列表接口
			console.log('加载地址列表')
		},
		
		// 获取完整地址
		getFullAddress(address) {
			return `${address.province}${address.city}${address.district}${address.detail}`
		},
		
		// 选择地址
		selectAddress(address) {
			if (this.selectionMode) {
				// 选择模式下，返回选中的地址
				uni.$emit('addressSelected', address)
				uni.navigateBack()
			} else {
				// 非选择模式下，编辑地址
				this.editAddress(address)
			}
		},
		
		// 设置默认地址
		setDefault(address, index) {
			if (address.isDefault) {
				return
			}
			
			// 取消其他地址的默认状态
			this.addressList.forEach(item => {
				item.isDefault = false
			})
			
			// 设置当前地址为默认
			address.isDefault = true
			
			// TODO: 调用设置默认地址接口
			uni.showToast({
				title: '设置成功',
				icon: 'success'
			})
		},
		
		// 添加地址
		addAddress() {
			uni.navigateTo({
				url: '/pages/my/address-edit'
			})
		},
		
		// 编辑地址
		editAddress(address) {
			uni.navigateTo({
				url: `/pages/my/address-edit?id=${address.id}`
			})
		},
		
		// 删除地址
		deleteAddress(address, index) {
			uni.showModal({
				title: '删除地址',
				content: '确定要删除这个收货地址吗？',
				confirmColor: '#ff4757',
				success: res => {
					if (res.confirm) {
						// TODO: 调用删除地址接口
						this.addressList.splice(index, 1)
						
						// 如果删除的是默认地址且还有其他地址，设置第一个为默认
						if (address.isDefault && this.addressList.length > 0) {
							this.addressList[0].isDefault = true
						}
						
						uni.showToast({
							title: '删除成功',
							icon: 'success'
						})
					}
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.address-page {
	background-color: #f5f5f5;
	height: 100vh;
	display: flex;
	flex-direction: column;
}

.nav-header {
	height: 44px;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 15px;
	border-bottom: 1px solid #f0f0f0;
	
	.nav-back,
	.nav-right {
		padding: 5px;
	}
	
	.nav-title {
		font-size: 16px;
		font-weight: 500;
		color: #333;
	}
}

.address-content {
	flex: 1;
	
	.address-list {
		padding: 10px 15px;
		
		.address-item {
			background-color: #fff;
			border-radius: 8px;
			padding: 15px;
			margin-bottom: 10px;
			border: 1px solid #f0f0f0;
			
			.address-info {
				margin-bottom: 15px;
				
				.address-header {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 8px;
					
					.user-info {
						display: flex;
						align-items: center;
						gap: 15px;
						
						.user-name {
							font-size: 16px;
							font-weight: 500;
							color: #333;
						}
						
						.user-phone {
							font-size: 14px;
							color: #666;
						}
					}
					
					.default-tag {
						background: linear-gradient(135deg, #27B387 0%, #1e9c6f 100%);
						border-radius: 10px;
						padding: 2px 8px;
						
						.tag-text {
							font-size: 10px;
							color: #fff;
						}
					}
				}
				
				.address-detail {
					font-size: 14px;
					color: #666;
					line-height: 1.5;
				}
			}
			
			.address-actions {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				gap: 20px;
				
				.action-btn {
					display: flex;
					align-items: center;
					gap: 4px;
					
					.btn-text {
						font-size: 12px;
						color: #666;
						
						&.delete {
							color: #ff4757;
						}
					}
				}
			}
		}
	}
	
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 400px;
		padding: 40px;
		
		.empty-image {
			width: 120px;
			height: 120px;
			margin-bottom: 20px;
			opacity: 0.6;
		}
		
		.empty-text {
			font-size: 14px;
			color: #999;
			margin-bottom: 30px;
		}
		
		.add-btn {
			height: 44px;
			padding: 0 30px;
			background: linear-gradient(135deg, #27B387 0%, #1e9c6f 100%);
			border: none;
			border-radius: 22px;
			display: flex;
			align-items: center;
			justify-content: center;
			
			.btn-text {
				font-size: 16px;
				color: #fff;
				font-weight: 500;
			}
		}
	}
}

.bottom-add {
	height: 80px;
	background-color: #fff;
	border-top: 1px solid #f0f0f0;
	display: flex;
	align-items: center;
	padding: 0 15px;
	
	.add-address-btn {
		flex: 1;
		height: 44px;
		background: linear-gradient(135deg, #27B387 0%, #1e9c6f 100%);
		border: none;
		border-radius: 22px;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		
		.btn-text {
			font-size: 16px;
			color: #fff;
			font-weight: 500;
		}
	}
}
</style>